<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>微分销管理平台</title>
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">

</head>
<body>

<div>
    <table width="100%" border="0" cellspacing="6" cellpadding="0" class="table table-striped table-bordered">
        <tbody>
        <tr valign="top">
            <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="6"
                       class="table table-striped table-bordered">
                    <tbody>
                    <tr>
                        <td valign="middle" class="blockTd">
                            <img th:src="@{img/icon012a6.gif}">
                            商户信息列表
                            <input type="hidden" id="RelaCatalogID" name="RelaCatalogID" value="0">
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 0 8px 4px;">
                            <a href="javascript:void(0);" ztype="zPushBtn" class="zPushBtn" hidefocus="true"
                               tabindex="-1" onselectstart="return false" onclick="add()">
                                <img th:src="@{/img/icon003a2.gif}"><b>新增</b>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-top: 0px; padding-left: 6px; padding-right: 6px; padding-bottom: 8px;">
                            <table width="100%" cellpadding="2" cellspacing="0" class="dataTable" sortstring="" id="dg1"
                                   page="true" size="0" multiselect="true" autofill="true" scroll="false" lazy="false"
                                   cachesize="0">
                                <tbody>
                                <tr ztype="head" class="dataTableHead">
                                    <td width="10%" align="center">
                                        序 号
                                    </td>
                                    <td align="center" width="10%">
                                        <b>登录账号</b>
                                    </td>
                                    <td align="center" width="10%">
                                        <b>商户名称</b>
                                    </td>
                                    <td align="center" width="10%">
                                        <b>QQ号码</b>
                                    </td>
                                    <td align="center" width="15%">
                                        <b>微信号</b>
                                    </td>
                                    <td align="center" width="15%">
                                        <b>联系电话</b>
                                    </td>
                                    <td align="center" width="15%">
                                        <b>创建时间</b>
                                    </td>
                                    <td align="center" width="15%">
                                        <b>操作</b>
                                    </td>
                                </tr>
                                <tr th:each="user, var : ${merchantUserList}">
                                    <td align="center" th:text="${var.count}"></td>
                                    <td align="center" th:text="${user.userName}"></td>
                                    <td align="center" th:text="${user.name}"></td>
                                    <td align="center" th:text="${user.qq}"></td>
                                    <td align="center" th:text="${user.wxh}"></td>
                                    <td align="center" th:text="${user.phone}"></td>
                                    <td align="center" th:text="${#dates.format(user.createTime, 'yyyy-MM-dd')}"></td>
                                    <td align="center">
                                        <a onclick="edit(this)" th:data="${user.id}" href="javascript:void(0);"
                                           class="zPushBtn">
                                            <img th:src="@{/img/icon003a3.gif}"><b>修改</b>
                                        </a>&nbsp;
                                        <a onclick="del(this)" th:data="${user.id}" href="javascript:void(0);"
                                           class="zPushBtn">
                                            <img th:src="@{/img/icon003a3.gif}"><b>删除</b>
                                        </a>&nbsp;
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<!--新增商户点击弹出的模态框页面-->
<div>
    <!-- Modal -->
    <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新增商户</h4>
                </div>
                <div id="merchantAddDiv" class="modal-body">
                    <input id="txtId" type="hidden">
                    <label>
                        商户登陆账号
                        <input id="txtUsername" type="text">
                    </label>
                    <label>
                        商户密码
                        <input id="txtPassword" type="text">
                    </label>
                    <label>
                        商户名称
                        <input id="txtName" type="text">
                    </label>
                    <label>
                        QQ号码
                        <input id="txtQQ" type="text">
                    </label>
                    <label>
                        微信号
                        <input id="txtWxh" type="text">
                    </label>
                    <label>
                        联系电话
                        <input id="txtPhone" type="text">
                    </label>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button type="button" class="btn btn-primary" onclick="save()">确 定</button>
                </div>
            </div>
        </div>
    </div>
</div>


<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>

<script type="text/javascript">
    var user = {
        "id": null,
        "name": null,
        "userName": null,
        "password": null,
        "qq": null,
        "wxh": null,
        "phone": null
    };

    function add() {
        $("#myModal").modal("show");
    }

    function edit(self) {
        var id = $(self).attr("data");
        $("#myModal").modal("show");
        post("merchant/getById", {"id": id}, function (result) {
            var data = result.data;
            $("#txtName").val(data.name);
            $("#txtUsername").val(data.userName);
            $("#txtPassword").val(data.password);
            $("#txtQQ").val(data.qq);
            $("#txtWxh").val(data.wxh);
            $("#txtPhone").val(data.phone);
            $("#txtId").val(id);
        });
    }

    function del(self) {
        var id = $(self).attr("data");
        post("merchant/del", {"id": id}, function () {
            reload();
        });
    }

    function save() {
        var id = $("#txtId").val();
        if (id.toString().length > 0) {
            user.id = id;
        } else {
            user.id = undefined;
        }
        user.name = $("#txtName").val();
        user.userName = $("#txtUsername").val();
        user.password = $("#txtPassword").val();
        user.qq = $("#txtQQ").val();
        user.wxh = $("#txtWxh").val();
        user.phone = $("#txtPhone").val();

        post("merchant/save", user, function (data) {
            reload();
        })
    }
</script>

</body>
</html>